<% include header %>
<div class="panel-title">
    <h2 class="text-center text-info form-group"><%= title %></h2>
</div>
<%if(success){%>
<div class="text-center"><%= success%></div>
<% }%>
<%if(error){%>
<div class="text-center"><%= error%></div>
<% }%>
<main>
    <ul class='tab'>
        <li class="on"><button>个人设置</button></li>
        <li><button>隐私</button></li>
        <li><button>头像</button></li>
        <li><button>系统</button></li>
        <li><button>小红花</button></li>
    </ul>
    <div class='list'>
        <ul class="active">
            <form  method="post" enctype="multipart/form-data" action="/p">
                <div class="row form-group">
                    <label class="col-sm-3 control-label">用户昵称:</label>
                    <div class="col-sm-4">
                        <input type="text"  name="name" value="<%= user.name%>" disabled>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-sm-3 control-label">签名档:</label>
                    <div class="col-sm-4">
                        <input type="text" name="sign" placeholder="请写下你的座右铭吧" value="<%= user.sign %>">
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-sm-3 control-label">邮箱:</label>
                    <div class="col-sm-4">
                        <input type="text"  name="email"  value="<%= user.email%>" disabled>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-sm-3 control-label">域名：</label>
                    <div class="col-sm-4">
                        <input type="text"  value="wuzhi.me/u/268345" disabled>
                    </div>
                </div>
                <div class="row form-group">
                    <label class="col-sm-3 control-label">个人介绍:</label>
                    <div class="col-sm-8">
                        <input type="text"  name="introduce" placeholder="简单的介绍下自己吧" value="<%= user.introduce %>">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-10">
                        <input type="submit" class="btn btn-success" value="更新个人资料">
                    </div>
                </div>
            </form>
        </ul>
        <ul class="secret">
            <form action="">
                <div class="a">
                    <div>请选择有哪些人可以查看你的日记</div>
                    <select name="" id="" style="font-size: 18px;margin: 10px 0 10px 0">
                        <option value="">大家</option>
                        <option value="">只有自己</option>
                    </select>
                    <p>当设置为“只有自己”后，您的日记讲只有您自己能看到。<br/>
                        同时您也不会出现在网络用户里。</p>
                </div>
                <div class="b">
                    <input type="submit" class="btn btn-success" value="确认修改"/>
                </div>
            </form>
        </ul>

        <ul class="tou">
            <from method="post" enctype="multipart/form-data" action="/tou">
            <div style="float: left">
                <p>请上传JPG、PNG格式的图片</p>
                <p>上传成功后如果图片不更新，你可以用浏览器 <br/> 多刷新几次。</p>
                <p style="font-size: 18px">也可以点击图片可以直接上传哦！</p>
            </div>
            <div class="row form-group" style="float: right;position: relative;left: 100px">
                <div style="font-size: 18px;margin: 0px 0px 10px 15px"> 当前头像:</div>
                <div id="choseimg" class="col-sm-4 ">
                    <img src="./img/<%=  user.pictureurl %>" onerror="this.src='./img/05.jpg'" style="width: 200px;height: 200px">
                    <input type="file"  name="perimg" style="position: relative;left: -350px;top: -100px"><br/>
                    <input type="submit" value="上传头像" style="position: relative;left: -350px;top: -100px;">
                </div>
            </div>
            </from>
        </ul>

        <ul class="xitong">
            <p>您可以随时删除你在吾志写的日记</p>
            <a href="/article">删除我的吾志日记>></a>
        </ul>
        <ul class="flower">
            <p style="font-size: 16px">您的小红花：<img src="./img/flower.png" alt=""/> x
                <% if(posts) {%>
                <%= posts.length %>
                <% } %>
            </p>
            <dl style="color: dimgrey">
                <dt>小红花是什么？</dt>
                <dd>你在吾志写一篇日记，就会增加一朵小红花。</dd>
                <dt>小红花能做什么？</dt>
                <dd>暂时，她只是一朵小红花，哈哈。</dd>
            </dl>
        </ul>
    </div>
</main>
<% include footer %>
<script type="text/javascript">
    var imgs = document.querySelector('#choseimg img');
    // 通过点击图片实现点击input选择文件的效果
    imgs.onclick = function () {

        this.nextElementSibling.click();
    }
    var inputs = document.querySelector('#choseimg input');
    var file;
    // 表单内容发生变化
    inputs.onchange = function () {

        // 取出选择文件(图片、html、text...)
        file = this.files[0];

        // startsWith('image')判断字符串是否以'image'开头
        if (file.type.startsWith('image')) {
            // URL.createObjectURL(file);创建一个指向该文件的url
            this.previousElementSibling.src = URL.createObjectURL(file);
        } else{
            alert('文件格式不正确，请选择图片');
        }
    }

//    点击按钮改变要设置的内容
    $('.tab li').each(function(index){
//        this指当前元素
        $(this).click(function(){
//                    找到对应索引的ul部分，通过添加或者删除class属性控制其展示
//                    //siblings() 找同级元素（兄弟姐妹元素）
                    $('.list ul').eq(index).addClass('active').siblings().removeClass('active');
                    $(this).addClass('on').siblings().removeClass('on');
                }
        )
    });

</script>


